<template>
  <div class='app-container'>
    <div ref="graphContainer" class="parent-wrapper">
      <a-button type="primary" style="position: absolute; top: 15px; left: 20px;" @click="createGraph">创建组</a-button>
    </div>
  </div>
</template>

<script>
import mxgraph from '@utils/init.js';
const { mxGraph,mxCellTracker,mxEvent,mxClient,mxRubberband,mxCodec,mxUtils,mxConstants,mxPerimeter } = mxgraph;

export default {
  name: '',
  module_index: 400,
  module_name: '左键拖拽框选',
  data() {
    return {
      graph: null,
      parent: null,
      num: 0,
      // 构造一个事件处理程序，该处理程序使用橡皮筋选择来选择图中的矩形区域。
      rubberBand: null
    };
  },
  created() { },
  mounted() {
    this.init();
    this.initRubber();
  },
  methods: {
    init() {
      // 创建全局容器
      this.graph = new mxGraph(this.$refs.graphContainer);
      // 创建全局父元素
      this.parent = this.graph.getDefaultParent();

      mxEvent.disableContextMenu(this.$refs.graphContainer);
    },
    createGraph() {
      ++this.num;
      var v1 = this.graph.insertVertex(this.parent,'Hello','Hello',Number(((this.num) + Math.random() * 1080).toFixed(2)),Number(((this.num) + Math.random() * 570).toFixed(2)),80,30);
      ++this.num;
      var v2 = this.graph.insertVertex(this.parent,'World','World',Number(((this.num) + Math.random() * 1080).toFixed(2)),Number(((this.num) + Math.random() * 570).toFixed(2)),80,30);
      ++this.num;
      var v3 = this.graph.insertVertex(this.parent,'everyBody!','everyBody!',Number(((this.num) + Math.random() * 1080).toFixed(2)),Number(((this.num) + Math.random() * 570).toFixed(2)),60,60);
      this.graph.insertEdge(v1,'v1-v2','',v1,v2);
      this.graph.insertEdge(v2,'v2-v3','',v2,v3,'edgeStyle=orthogonalEdgeStyle;');
      this.graph.insertEdge(v3,'v3-v1','',v3,v1);
    },
    initRubber() {
      this.rubberBand = new mxRubberband(this.graph)
    },
  }
};
</script>

<style>
</style>